<template>
  <div class="wrapper">
    <!-- 订单进度 -->
    <div class="static_div">
      <el-card class="box-card">
        <div class="cart-title">订单进度</div>
        <el-steps :active="state.step_num" align-center>
          <template v-for="item in state.status_list" :key="item.status_id">
            <el-step :title="item.status_name">
              <template v-slot:description>
                <div style="color: black">{{ item.opt_time }}</div>
                <div style="color: black">操作人:{{ item.opt_user_name }}</div>
                <div style="display:flex;justify-content:center;">
                <Upload :action="state.up_url" @onSuccess="onSuccess">
                  <el-button @click="upload(item)" size="small" type="text"
                    >上传附件</el-button
                  >
                </Upload>
                </div>
                <div class="fileDiv">
                  <div
                    class="file-item"
                    v-for="(child, index) in item.file_url_list"
                    :key="child"
                  >
                    <a :href="child" download="附件"> 附件{{ index + 1 }}</a
                    ><span @click="del_pic(item, index)">&times</span>
                  </div>
                </div>
              </template>
            </el-step>
          </template>
        </el-steps>
      </el-card>
    </div>
    <!-- 基本信息 -->
    <div class="static_div">
      <el-card class="box-card">
        <div class="cart-title">基本信息</div>
        <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
          <el-table-column prop="order_id" label="订单ID"> </el-table-column>
          <el-table-column prop="name" label="采购门店"> </el-table-column>
          <el-table-column prop="name" label="订单类型"> </el-table-column>
          <el-table-column prop="province" label="支付方式"> </el-table-column>
          <el-table-column label="下单人信息" width="150">
            <template v-slot="scope">
              <div>姓名：{{ scope.row.receiver_info.member_name }}</div>
              <div>电话：{{ scope.row.receiver_info.receiver_phone }}</div>
              <div>折扣：{{ scope.row.w_order_count }}</div>
            </template>
          </el-table-column>
          <el-table-column label="收货地址">
            <template v-slot="scope">
              {{ scope.row.receiver_info.receiver_address }}
            </template>
          </el-table-column>
          <el-table-column prop="creator_time" label="下单时间">
          </el-table-column>
          <el-table-column prop="zip" label="订单状态"> </el-table-column>
          <el-table-column prop="buyer_note" label="买家备注">
          </el-table-column>
          <el-table-column prop="note" label="客服备注"> </el-table-column>
          <el-table-column prop="freight_name" label="运费模板">
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 订单信息商品 -->
    <div class="static_div m-t">
      <el-card class="box-card">
        <div class="cart-title">订单信息</div>
        <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
          <el-table-column prop="goods_name" label="商品名称">
            <template v-slot="scope">
              <div v-for="item in scope.row.goods_info">
                {{ item.goods_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template v-slot="scope">
              <div v-for="item in scope.row.goods_info">
                {{ item.good_price }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="数量">
            <template v-slot="scope">
              <div v-for="item in scope.row.goods_info">
                {{ item.goods_cartons }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goods_sum" label="金额">
            <template v-slot="scope">
              <div v-for="item in scope.row.goods_info">
                {{ item.goods_sum }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量">
            <template v-slot="scope">
              <div v-for="item in scope.row.goods_info">
                {{ item.weight }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="是否自提">
            <template v-slot="scope">
              {{ scope.row.is_oneself ? "是" : "否" }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 发货单信息 -->
    <div class="static_div m-t">
      <el-card class="box-card">
        <div class="cart-title">发货单信息</div>
        <table class="order-headr-fixed text-center" border="1">
          <tr>
            <th class="w14">商品名称</th>
            <th class="w6">实发数量(箱)</th>
            <th class="w10">物流信息</th>
            <th class="w10">收货人信息</th>
          </tr>
        </table>
        <template v-for="(item, index) in state.result">
          <table class="orderTb" border="1">
            <tr>
              <th class="w14"></th>
              <th class="w6"></th>
              <th class="w10"></th>
              <th class="w10"></th>
            </tr>
            <tbody>
              <tr>
                <td colspan="4" class="p-double">
                  <div class="navFlex">
                    <div class="flexleft">
                      <div class="nav-item">发货单ID：{{ item.pre_id }}</div>
                      <div class="nav-item">
                        创建时间:{{ item.create_time }}
                      </div>
                      <div class="nav-item">状态：{{ item.status }}</div>
                      <div class="nav-item">
                        发货仓:{{ item.warehouse_name }}
                      </div>
                      <div
                        class="nav-item"
                        style="display: flex; align-items: center"
                      >
                        <div>备注：{{ item.note }}</div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 循环tr -->
              <template v-for="(child, index) in item.items">
                <tr>
                  <template v-if="index == 0">
                    <td>{{ child.goods_name }}</td>
                    <td>{{ child.cartons }}({{ child.count }}件)</td>
                    <td :rowspan="item.items.length">
                      <div class="cssFlex">
                        <div class="logs-left">
                          <div>模板:{{ item.template }}</div>
                          <div>物流:{{ item.express_name }}</div>
                          <div>单号:{{ item.express_num }}</div>
                          <div>重量:</div>
                          <div>运费:{{ item.transport_fee }}</div>
                        </div>
                      </div>
                    </td>
                    <td :rowspan="item.items.length">
                      <div class="cssFlex">
                        <div class="logs-left">
                          <div>收货人:{{ item.receive_name }}</div>
                          <div>
                            用户:{{ item.buyer_name }}({{ item.buyer_alias }})
                          </div>
                          <div>
                            地址:{{ item.province }}{{ item.city
                            }}{{ item.district }}
                          </div>
                          <div>
                            是否自提:{{ item.is_oneself ? "是" : "否" }}
                          </div>
                          <div>送货时间:{{ item.expect_date }}</div>
                        </div>
                      </div>
                    </td>
                  </template>
                  <template v-else>
                    <td>{{ child.goods_name }}</td>
                    <td>{{ child.cartons }}({{ child.count }}件)</td>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </template>
      </el-card>
    </div>
    <!-- 退款信息 -->
    <div class="static_div m-t">
      <el-card class="box-card">
        <div class="cart-title">退款信息</div>
        <el-table
          :data="state.invenRecord"
          style="width: 100%; margin-top: 20px; display: none"
        >
          <el-table-column fixed prop="date" label="退款单号">
          </el-table-column>
          <el-table-column prop="name" label="退款商品名称"> </el-table-column>
          <el-table-column prop="name" label="申请时间"> </el-table-column>
          <el-table-column prop="province" label="退款数量"> </el-table-column>
          <el-table-column prop="zip" label="退款单价"> </el-table-column>
          <el-table-column prop="name" label="退款金额"> </el-table-column>
        </el-table>
        <table class="order-headr-fixed text-center" border="1">
          <tr>
            <th class="w14">商品名称</th>
            <th class="w8">销售单价</th>
            <th class="w8">退款单价</th>
            <th class="w8">数量</th>
            <th class="w8">退款金额</th>
            <th class="w10">退款原因</th>
            <th class="w8">退款方式</th>
            <th class="w10">买家信息</th>
          </tr>
        </table>
        <template v-for="(item, index) in state.refundData">
          <table class="orderTb" border="1">
            <tr>
              <th class="w14"></th>
              <th class="w8"></th>
              <th class="w8"></th>
              <th class="w8"></th>
              <th class="w8"></th>
              <th class="w10"></th>
              <th class="w8"></th>
              <th class="w10"></th>
            </tr>
            <tbody>
              <tr>
                <td colspan="9" class="p-double">
                  <div class="navFlex">
                    <div class="flexleft">
                      <div class="nav-item">退款单号:{{ item.pre_id }}</div>
                      <div class="nav-item">
                        发货单号:{{ item.w_order_pre_id }}
                      </div>
                      <div class="nav-item">
                        申请时间：{{ item.create_time }}
                      </div>
                      <div class="nav-item">退款状态:{{ item.status }}</div>
                      <div
                        class="nav-item"
                        style="display: flex; align-items: center"
                      >
                        <div>退款金额:{{ item.amount }}</div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 循环tr -->
              <template v-for="(child, index) in item.items">
                <tr>
                  <template v-if="index == 0">
                    <td>{{ child.goods_name }}</td>
                    <td align="center">{{ child.sell_price }}</td>
                    <td align="center">{{ child.refund_price }}</td>
                    <td align="center">{{ child.all_count }}</td>
                    <td align="center">{{ child.amount }}</td>
                    <td :rowspan="item.items.length">
                      {{ item.note }}
                    </td>
                    <td align="center" :rowspan="item.items.length">
                      {{ item.refund_pay_type }}
                    </td>
                    <td align="left" :rowspan="item.items.length">
                      <div>掌柜:{{ item.buyer_info.buyer_name }}</div>
                      <div>店铺:{{ item.buyer_info.alias_name }}</div>
                      <div>电话:{{ item.buyer_info.phone }}</div>
                    </td>
                  </template>
                  <template v-else>
                    <td>{{ child.goods_name }}</td>
                    <td align="center">{{ child.sell_price }}</td>
                    <td align="center">{{ child.refund_price }}</td>
                    <td align="center">{{ child.all_count }}</td>
                    <td align="center">{{ child.amount }}</td>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </template>
      </el-card>
    </div>
    <!-- 费用信息 -->
    <div class="static_div m-t">
      <el-card class="box-card">
        <div class="cart-title">费用信息</div>
        <el-table
          :data="state.invenRecord"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column fixed prop="date" label="订单金额">
          </el-table-column>
          <el-table-column prop="name" label="支付金额"> </el-table-column>
          <el-table-column prop="name" label="支付方式"> </el-table-column>
          <el-table-column prop="province" label="运费"> </el-table-column>
          <el-table-column prop="zip" label="运费模板"> </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, getCurrentInstance } from "vue";
import { ElNotification } from "element-plus";
import Upload from "@/components/Upload.vue";
export default {
    name:"order_detail",
  components: { Upload },
  setup(props, { emit }) {
    let { ctx } = getCurrentInstance();
    console.log(ctx.$router.currentRoute);
    console.log(ctx.$router.currentRoute.value.redirectedFrom.query.order_id);
    let state = reactive({
      current_order_id:
        ctx.$router.currentRoute.value.redirectedFrom.query.order_id,
      tableData: [],
      current_upload_status_id: "",
      result: [],
      up_url: "/api/tanxiaji/common/upload_file/",
      refundData: [],
      step_num: "",
      status_list: [],
      invenPro: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
      ],
      invenRecord: [],
    });
    onMounted(() => {
      getOrderlist();
      get_send_good_list();
      get_refund_list();
    });
    // 上传确定哪个类型
    function upload(item) {
      console.log(item);
      state.current_upload_status_id = item.status_id;
    }
    // 获取订单相关信息
    function getOrderlist() {
      ctx.$http
        .get("/tanxiaji/get_order_list/", {
          keyword: state.current_order_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            console.log(res);
            state.tableData = res.order_list;
            state.status_list = res.order_list[0].status_info.status_list;
            state.step_num = res.order_list[0].status_info.status_step_count;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          console.log(err);
          ElNotification.error(err);
        });
    }
    // 获取附件的回调
    async function onSuccess(e) {
      console.log(
        "state.current_upload_status_id",
        state.current_upload_status_id
      );
      console.log("接收到子组件的回调", e);
      let data = state.status_list.find((v) => {
        return v.status_id == state.current_upload_status_id;
      });
      data.file_url_list.push(e.url);
      const msg = await conmonUp_or_del(state.current_upload_status_id, data.file_url_list);
      if (msg.errno == 0) {
        ElNotification.success(msg.errmsg);
        getOrderlist();
      } else {
        ElNotification.error(msg.errmsg);
        getOrderlist();
      }

    }
    // 发货单
    function get_send_good_list() {
      ctx.$http
        .get("/tanxiaji/delivery/list/", {
          keywords: state.current_order_id,
          need_score: 1,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.result = res.data.result;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 退款单
    function get_refund_list() {
      ctx.$http
        .get("/tanxiaji/delivery/refund/list/", {
          keywords: state.current_order_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.refundData = res.data.result;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 附件删除
  async  function del_pic(item, index) {
      console.log(item, index);
      item.file_url_list.splice(index,1);
  const msg=await conmonUp_or_del(item.status_id, item.file_url_list);
    if(msg.errno==0){
      ElNotification.success(msg.errmsg);
    }
   }
    // 上传和删除的文件公用ajax
    function conmonUp_or_del(id, doc_arr) {
      return new Promise((resolve, reject) => {
        ctx.$http
          .post("/tanxiaji/order_rechod_file_url_edit/", {
            status_id: id,
            file_url_list: JSON.stringify(doc_arr),
          })
          .then((res) => {
            if (res.errno == 0) {
              resolve(res);
            } else {
              resolve(res);
            }
          })
          .catch((err) => {
            reject(err)
            ElNotification.error(err);
          });
      });
    }
    return {
      del_pic,
      state,
      getOrderlist,
      get_refund_list,
      upload,
      onSuccess,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .m-t {
    margin-top: 10px;
  }
  .static_div {
    width: 100%;
    .cart-title {
      display: flex;
    }
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
  }
  .orderTb {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 14px;
    margin-top: 8px;
  }
  .orderTb tr td {
    padding: 2px 8px;
  }
  .orderTb tr th {
    padding: 0;
    border: none;
  }
  .orderTb:hover {
    background: #f7f8fa;
  }
  .p-double {
    background: #f7f8fa;
  }
  .navFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f8fa;
    .flexleft {
      display: flex;
      align-items: center;
      width: 84%;
      .nav-item {
        margin-right: 80px;
      }
    }
    .flexright {
      cursor: pointer;
      color: rgb(46, 127, 181);
      position: relative;
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
  }
  .cssFlex {
    display: flex;
    justify-content: space-between;
    .logs-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .editLog {
        cursor: pointer;
        color: rgb(46, 127, 181);
      }
    }
  }
  // 组装table
  .order-headr-fixed {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
    border: none;
    color: #909399;
    th {
      text-align: center;
      background: #eaeaea;
      padding: 8px 0;
      border: none;
    }
  }
  .fileDiv {
    display: flex;
    flex-wrap: wrap;
    .file-item {
      margin-right: 5px;
    }
  }
}
</style>